<template>
	<view> 
	<view class="tabsOrder" >
		<view class="tabs" :class="{ 'active': num == index }" @click="onGetIdx(index)" v-for="(item,index) in tabs">
			<view class="tabs_item">{{item.name}}</view>
		</view>
	</view>
	<!--  -->
	<view v-if="this.num==0">
		<view class="content" v-for="item in payList[0]">
			 <view class="content_image">
			 	<image :src="item.goods_big_logo" mode="widthFix"></image>
			 </view>
			 <view class="content_price">
				 <view class="id">订单号:{{item.goods_id}}</view>
			 	<view class="name">{{item.goods_name}}</view>
				<view class="price">￥{{item.goods_price}}</view>
			 </view>
		</view>
	</view>
	<view v-else>
		<view class="content" v-for="item in shopList">
			 <view class="content_image">
			 	<image :src="item.pics[0].pics_mid_url" mode="widthFix"></image>
			 </view>
			 <view class="content_price">
				 <view class="id">订单号:{{item.id}}</view>
			 	<view class="name">{{item.goods_name}}</view>
				<view class="price">￥{{item.goods_price}}</view>
			 </view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs:[
					{
						id:0,
						name:'全部订单'
					},
					{
						id:1,
						name:'已付款'
					},
					{
						id:2,
						name:'待发货'
					},
					{
						id:3,
						name:'退款'
					}
				],
				num:0,
				shopList:[],
				payList:[]
			}
		},
		onLoad(res) {
			this.shopList=uni.getStorageSync('payShop')
			this.payList=uni.getStorageSync('order')
			this.num=res.page
			console.log(res.page)
		},
		methods: {
			// 用来切换点击的索引值
			 onGetIdx(idx){
			    this.num = idx
			    }
		}
	}
</script>

<style lang="scss">
    .tabsOrder{
		display: flex;
		justify-content: space-around;
		height: 50rpx;
		text-align: center;
		padding: 10rpx 10rpx;
		.tabs_item{
			font-size: 35rpx;
		}
	}
	.active{
		color: $shop-color;
		border-bottom: 5rpx solid currentColor;
	}
	.content{
		display: flex;
		height: 180rpx;
		.content_image{
			flex: 2;
			image{
				width: 90%;
			}
		}
		.content_price{
			padding: 10rpx 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.name{
				padding-left: 10rpx;
				display: -webkit-box;
				overflow: hidden;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:1;
			}
			.price{
				font-size: 35rpx;
				font-weight: bold;
				color: $shop-color;
			}
			flex: 4;
		}
	}
</style>
